<template>
  <div>
    <div class="echatWarp">
      <div id="applications"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import img from "../../../../assets/yuan2.png";
import imgs from "../../../../assets/yuan1.png";
export default {
  data() {
    return {
      max: 0,
      spanActive: 1,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.applicationsAdd();
    });
  },
  methods: {
    applicationsAdd() {
      var chartDom = document.getElementById("applications");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
          data: ["项目成交额", "限额以上", "限额以下"],
          icon: "rect",
          itemHeight: 10,
          itemWidth: 10,
          textStyle: {
            color: "#A7D4C6",
            fontSize: 14,
          },
          itemGap: 20,
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            selectedMode: "single",
            radius: ["40%", "55%"],
            label: {
              show: false,
            },
            center: ["50%", "50%"],
            left: "center",
            width: "100%",
            color: {
              x: 0.5,
              y: 0.5,
              r: 0.5,
              // 圆环设置渐变色
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(60, 248, 188, 0.8)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(17, 75, 62, 0.8)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            selectedMode: false, //取消图例上的点击事件
            data: [{ value: 1048, name: "Baidu" }],
            itemStyle: {
              normal: {
                // 饼状图发光
                shadowBlur: 40,
                shadowColor: "rgba(60, 248, 188, 0.8)",
              },
            },
          },
          {
            name: "Access From",
            type: "pie",
            radius: ["20%", "40%"],
            left: "center",
            // labelLine: {
            //   length: 30,
            // },
            center: ["50%", "50%"],

            width: "100%",
            z: 10,
            itemStyle: {
              normal: {
                // 不同数据显示不同颜色
                color: function (params) {
                  var colorList = [
                    "rgba(25, 203, 255, 1)",
                    "rgba(255, 249, 10, 1)",
                    "#00fffb",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            label: {
              position: "outside",
              alignTo: "edge",
              formatter: "{name|{b}}\n{value|{d} %}",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 25,
              rich: {
                value: {
                  fontSize: 14,
                  fontFamily: "Microsoft YaHei",
                  color: "#98B8B0",
                },
                name: {
                  fontSize: 14,
                  fontFamily: "Microsoft YaHei",
                  color: "#98B8B0",
                },
              },
            },
            labelLine: {
              // show: true,
              length: 50,
              length2: 50,
              maxSurfaceAngle: 80,
              lineStyle: {
                color: "rgba(60, 248, 188, 1)",
              },
            },
            // 使牵引线穿过数据
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2;
              const points = params.labelLinePoints;
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points,
              };
            },
            data: [
              { value: 200, name: "限额以上" },
              { value: 335, name: "限额以下" },
              { value: 310, name: "项目成交额" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //点击年月日
    clickActive(val) {
      this.spanActive = val;
    },
  },
};
</script>

<style scoped>
.echatWarp {
  width: 600px;
  height: 300px;
  margin-bottom: 50px;
  background-color: #000;
}
.echatWarp .echartsNav {
  display: flex;
  align-items: center;
}
.echatWarp .navText {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 10px;
}
.echatWarp .nvaTabls {
  width: 299px;
  height: 26px;
  background: #002537;
  border: 1px solid #00fffb;
  border-radius: 12px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #00ffb5;
  display: flex;
  box-sizing: border-box;
  line-height: 26px;
  margin-left: 52px;
}
.echatWarp .nvaTabls span:hover {
  cursor: pointer;
}
.echatWarp .nvaTabls span {
  width: 62px;
  height: 24px;
  border-radius: 12px;
  display: block;
  text-align: center;
  box-sizing: border-box;
}
.echatWarp .nvaTabls .spanActive {
  font-weight: bold;
  color: #222222;
  background: #00fffb;
  margin-left: -1px;
}
.echatWarp .nvaTabls .spanright {
  font-weight: bold;
  color: #222222;
  background: #00fffb;
  margin-right: -1px;
}
.navLeft {
  width: 23px;
  height: 26px;
  background: url("../../../../assets/leftDian.png") no-repeat center;
  background-size: 100% 100%;
}
#echartsOne {
  width: 100%;
  height: 100%;
}
#echartsTwo {
  width: 100%;
  height: 100%;
}
#applications {
  width: 100%;
  height: 100%;
}
#projectCategory {
  width: 100%;
  height: 100%;
}
#applicationsDouble {
  width: 100%;
  height: 100%;
}
</style>